<template>
  <div class="outside">
    <div class="arrow">
      <van-icon name="arrow-left" size="35" style="line-height: 70px" />
    </div>
    <header>
      <h1>忘记密码？</h1>
      <p>请在下面输入您的电子邮件以接收密码重置邮件</p>
    </header>
    <main>
      <div class="textbox">
        <span class="active" :class="{ min: flag }">{{ email }}</span>
        <input type="text" :value="value" @input="upValue" @click="Good" />
      </div>
    </main>
    <footer>
      <van-button
        type="primary"
        color="linear-gradient(to right, #0F73EE, #C644FC)"
        style="width: 90vw"
        >发送</van-button
      >
    </footer>
  </div>
</template>

<style lang="less" scoped>
.arrow {
  height: 70px;
}
.outside {
  width: 90vw;
  height: 80vh;
  margin: 0 auto;

  header h1{
    height: 5vh;
  }
  header p {
    font-size: @xs-font;
  }

  main {
    margin: 5vh 0;
    .textbox {
      border: 1px solid #6666667a;
      border-radius: 10px;
      input {
        height: 5vh;
        width: 90%;
        border: 0px;
        background-color: rgba(255, 255, 255, 0);
        z-index: 20;
        padding: 10px;
      }
      .active {
        font-size: 16px;
        top: 15px;
        left: 10px;
        // position: absolute;
        transition: all 1s ease-out;
      }
      .min {
        font-size: 12px;
        top: 5px;
      }
    }
  }
  // .active {
  //   color: #6666667a;
  //   font-size: @xxxl-font !important;
  //   // transform: scale(3);
  //   transform: translate(20px, 25px);
  // }
}
</style>

<script lang="ts" setup>
import { ref } from "vue";
// let flag =true;

const value = ref("");
const flag = ref(false);
const email = "邮箱地址";

function upValue(event: any) {
  value.value = event.target.value;
}
function Good() {
  flag.value = true;
}

// const toggleFlag = () => {
//       flag = flag=false;
//     };
</script>

<!-- <template>
  <div>
    <input type="text" :value="value" @input="upValue" @click="Good" />
    <span class="active" :class="{ min: flag }" v-if="!value">{{
      placeholder
    }}</span>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const value = ref("");
const flag = ref(false);

const placeholder = "请输入内容";

function upValue(event: any) {
  value.value = event.target.value;
}

function Good() {
  flag.value = true;
}
</script>

<style>
.active {
  font-size: 16px;
  position: absolute;
  top: 15px;
  left: 10px;
  transition: all 1s ease-out;
}

.min {
  font-size: 12px;
  top: 5px;
}
</style> -->
